<template>
  <view class="listcard" @click="ontap">
    <view class="item" style="font-weight: bold">
      <slot name="before"> </slot>
    </view>

    <view class="item" v-for="(item, key) in listinputs" :key="key">
      <view class="label">{{ item.label }}</view>
      <view
        class="value copytext"
        @click="copyfn(item.value)"
        v-if="item.type == 'file'"
        >复制</view
      >
      <view class="value" v-else>{{ item.value }}</view>
    </view>
    <slot name="after"> </slot>
  </view>
</template>

<script>
export default {
  name: "listcard",
  props: {
    item: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    list: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    listinputs() {
      return this.list.map((e) => {
        let v = this.item[e.value];
        if (e.changevalue) {
          v = e.changevalue({ item: this.item });
        } else if (e.type == "select") {
          let dqoption = e.option.find((e) => e.value == v) || { label: v };
          v = dqoption.label;
        } else if (e.type == "date") {
          v = v || "";
          if (v != "" && Number(v)) {
            v = this.$u.timeFormat(new Date(Number(v)));
          } else {
            v = v.slice(0, 10);
          }
        }
        return {
          ...e,
          label: e.label,
          value: v,
        };
      });
    },
  },
  methods: {
    ontap() {
      console.log(123, this.item);
      this.$emit("click", this.item);
    },
    copyfn(text) {
      console.log(text);
      uni.setClipboardData({
        data: String(text),
        success: function () {
          console.log("复制成功");
          // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
          uni.showToast({
            title: "复制成功",
            icon: "none",
            duration: 2000,
          });
        },
        fail: function () {
          console.error("复制失败");
          // 可以添加用户友好的提示，例如使用uni.showToast提示复制失败
          uni.showToast({
            title: "复制失败",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.listcard {
  margin: 20rpx;
  box-shadow: 0rpx 0rpx 10rpx #eee;
  border-radius: 10rpx;
  color: #333;
  padding: 20rpx 0;

  .item {
    display: flex;
    line-height: 60rpx;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    font-size: 28rpx;

    .label {
      flex-shrink: 0;
      flex-grow: 0;
      padding-right: 40rpx;
    }

    .value {
      line-height: 36rpx;
      word-break: break-word;
      // width: 0;
      // flex: 1;
    }

    .copytext {
      color: #409eff;
    }
  }
}
</style>
